<template>
  <div class="index">
    <Header curRoute='index'></Header>
    <div class="banner">
      <img src="@/assets/images/banner.jpg" alt="" srcset="" />
    </div>
    <div class="section">
      <div class="section-wrap">
        <div class="section-tit">
          <img src="@/assets/images/tit1.png" alt="" srcset="" />
        </div>
        <div class="section-content about-content">
          <div class="about-left"><img src="@/assets/images/img1.png" alt="" srcset="" /></div>
          <div class="about-right">
            <h3><i></i><span>公证链数据共享服务平台</span></h3>
            <p class="about-right-text">
              公证链数据共享服务平台由中船重工第七二二研究所联合复旦大学数据分析与安全实验室、中国人民大学法学院建设。公证链数据共享服务平台以国家重点研发计划子课题“电子公证支撑体系架构与公证信息电子化保全交换鉴定技（2018YFC0830905）”为基础，严格按照公证司法行政行业标准打造公证区块链数据公证服务平台，推动公证数据高效共享，提升公证服务质效。
            </p>
            <ul class="about-right-info">
              <li>
                <img src="@/assets/images/about-icon1.png" alt="" srcset="" />
                <p>联盟链技术保障<br />数据可信共享</p>
              </li>
              <li>
                <img src="@/assets/images/about-icon2.png" alt="" srcset="" />
                <p>数据分布式存储<br />保证轻量化建设</p>
              </li>
              <li>
                <img src="@/assets/images/about-icon3.png" alt="" srcset="" />
                <p>分级访问控制<br />保障数据隐私</p>
              </li>
              <li>
                <img src="@/assets/images/about-icon4.png" alt="" srcset="" />
                <p>各联盟链节点<br />平等中立</p>
              </li>
              <li>
                <img src="@/assets/images/about-icon5.png" alt="" srcset="" />
                <p>公证数据全生命<br />周期管理</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="section product">
      <div class="section-wrap">
        <div class="section-tit">
          <img src="@/assets/images/tit2.png" alt="" srcset="" />
        </div>
        <div class="section-content product-content">
          <ul>
            <li>
              <img src="@/assets/images/icon1.jpg" alt="" srcset="" />
              <span>联盟链</span>
            </li>
            <li>
              <img src="@/assets/images/icon2.jpg" alt="" srcset="" />
              <span>加密技术</span>
            </li>
            <li>
              <img src="@/assets/images/icon3.jpg" alt="" srcset="" />
              <span>行业标准</span>
            </li>
            <li>
              <img src="@/assets/images/icon4.jpg" alt="" srcset="" />
              <span>智能合约</span>
            </li>
            <li>
              <img src="@/assets/images/icon5.jpg" alt="" srcset="" />
              <span>身份核验</span>
            </li>
            <li>
              <img src="@/assets/images/icon6.jpg" alt="" srcset="" />
              <span>...</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="section category">
      <div class="section-wrap">
        <div class="section-tit">
          <img src="@/assets/images/tit3.png" alt="" srcset="" />
        </div>
        <div class="section-content category-content">
          <ul>
            <li v-for="(item, index) in category" :key="index">
              <i :class="`iconfont ${item.icon}`"></i>
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="section publicity">
      <div class="section-wrap">
        <div class="section-tit">
          <img src="@/assets/images/tit4.png" alt="" srcset="" />
        </div>
        <div class="section-content publicity-content">
          <img src="@/assets/images/chinaMap.png" alt="" srcset="" />
        </div>
      </div>
    </div>
    <div class="section realTimeData">
      <div class="section-wrap">
        <div class="section-tit">
          <img src="@/assets/images/tit5.png" alt="" srcset="" />
        </div>
        <div class="section-content realTimeData-content">
          <ul class="realTimeData-status">
            <li class="jiedian"><i></i>区块链节点数量<span>{{recordData.blockNum}}</span></li>
            <li class="heyan"><i></i>在线核验数据量<span>{{recordData.checkNum}}</span></li>
            <li class="yanzheng"><i></i>公证书验证数据量<span>{{recordData.fileNum}}</span></li>
          </ul>
          <div class="table-data">
            <p class="tit">司法链区块数据列表</p>
            <table>
              <thead>
                <th width='160'>区块高度</th>
                <th width='140'>交易数</th>
                <th width='660'>区块HASH</th>
                <th width='240'>时间</th>
              </thead>
              <tbody>              
                <tr v-for="item in recordData.tabData" :key="item.id">
                  <td>{{item.blockHeight}}</td>
                  <td>{{item.tradeNum}}</td>
                  <td>{{item.hash}}</td>
                  <td>{{item.createTime}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, ref, onUnmounted } from 'vue';
import { Header, Footer } from '@/components';
import { useStore } from 'vuex';

/**
 * 首页
 * @Author yuanyexu
 * @Date 2021-09-01
 */
export default defineComponent({
  name: 'Index',
  components: {Header, Footer},
  setup() {
    const store = useStore();
    const category = reactive([
      {
        icon: 'icon-chushenggongzheng',
        name: '出生公证',
      },
      {
        icon: 'icon-gongzuozhengminggongzheng',
        name: '工作证明公证',
      },
      {
        icon: 'icon-jiankangzhenggongzheng',
        name: '健康证公证',
      },
      {
        icon: 'icon-lihunzhenggongzheng',
        name: '离婚证公证',
      },
      {
        icon: 'icon-shouyangdengjizhenggongzheng',
        name: '收养登记证公证',
      },
      {
        icon: 'icon-wufanzuijilugongzheng',
        name: '无犯罪记录公证',
      },
      {
        icon: 'icon-fangchanzhenggongzheng',
        name: '房产证公证',
      },
      {
        icon: 'icon-jidongchedengjizhengshugongzheng',
        name: '机动车登记证书公证',
      },
      {
        icon: 'icon-jiehunzhenggongzheng',
        name: '结婚证公证',
      },
      {
        icon: 'icon-qinshuguanxigongzheng',
        name: '亲属关系公证',
      },
      {
        icon: 'icon-weihunshengminggongzheng',
        name: '未婚声明公证',
      },
      {
        icon: 'icon-wufanzuijilugongzheng',
        name: '无犯罪记录公证',
      }
    ]);
    const recordData = reactive({
      blockNum: 0,
      checkNum: 0,
      fileNum: 0,
      tabData: [
        {
            id: '',
            blockHeight: '',
            tradeNum: '',
            hash: "",
            createTime: ""
        }
      ]
    });
    let timer = null;
    const timingGetData = () => {
      getDataRecord();
      timer = setInterval(() => {
        getDataRecord();
      }, 4500)
    };
    const getDataRecord = async() => {
      const {blockNum, checkNum, fileNum, dataRecord} = await store.dispatch('getDataRecord');
      recordData.blockNum = blockNum;
      recordData.checkNum = checkNum;
      recordData.fileNum = fileNum;
      recordData.tabData = dataRecord;
    };
    onMounted(() => {
      timingGetData();
    });
    onUnmounted(() => {
      clearInterval(timer)
    })
    return {
      category,
      recordData,
    };
  },
});
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.banner {
  width: 100%;
  min-width: 1200px;
  img {
    display: block;
    width: 100%;
  }
}
.section {
  .section-wrap {
    width: 1200px;
    margin: 0 auto;
  }
  &-tit {
    padding: 60px 0 50px;
    img {
      display: block;
      height: 120px;
      margin: 0 auto;
    }
  }
}
.about {
  &-content {
    display: flex;
    margin-bottom: 60px;
  }
  &-left {
    width: 600px;
  }
  &-right {
    width: 600px;
    margin: 20px 0 0 50px;
    h3 {
      display: flex;
      font-weight: normal;
      i {
        margin-right: 10px;
        width: 5px;
        height: 21px;
        margin-top: 2px;
        background: #f62924;
      }
      span {
        font-size: 22px;
      }
    }
    &-text {
      font-size: 15px;
      color: #666666;
      line-height: 30px;
      margin: 20px 0px;
    }
    &-info {
      display: flex;
      align-content: center;
      li {
        display: block;
        width: 120px;
        img{
          display: block;
          margin: 0px auto 15px;
        }
        p {
          text-align: center;
          font-size: 14px;
          color: #666666;
          line-height: 20px;
        }
      }
    }
  }
}
.product {
  background: #f6f6f6;
  &-content {
    ul {
      @extend %clearfix;
      li  {
        width: 33.33%;
        float: left;
        text-align: center;
        margin-bottom: 45px;
        img {
          display: block;
          margin: 0 auto;
        }
        span {
          display: block;
          text-align: center;
          font-size: 24px;
          line-height: 70px;
        }
      }
    }
  }
}
.publicity {
  background: #bd2b2d;
  &-content {
    img {
      display: block;
      margin: -50px auto 0px;
    }
  }
}
.realTimeData {
  &-status {
    @extend %clearfix;
    line-height: 60px;
    margin-bottom: 20px;
    li {
      display: block;
      width: 33.33%;
      float: left;
      text-align: center;
      font-size: 16px;
      color: #4f4f4f;
      i {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background: #198ccd;
        margin: 0 8px;
      }
      span {
        color: #198ccd;
        margin-left: 10px;
      }
    }
    li.heyan {
      i {
        background: #1ec08e;
      }
      span {
        color: #1ec08e;
      }
    }
    li.yanzheng {
      i {
        background: #f0a818;
      }
      span {
        color: #f0a818;
      }
    }
  }
  .table-data {
    margin-bottom: 80px;
    .tit {
      font-family: "微软雅黑";
      display: block;
      height: 40px;
      background: #f42923;
      color: #fff;
      text-align: center;
      line-height: 40px;
      font-size: 18px;
      margin: 0 2px;
    }
    table {
      thead {
        height: 40px;
        line-height: 40px;
        background: #feecec;
      }
      tr {
        line-height: 40px;
        height: 40px;
        border-bottom: #f7f7f7 solid 1px;
        td {
          text-align: center;
          color: #676767;
          border-right: #f7f7f7 solid 1px;
          border-bottom: #f7f7f7 solid 1px;
        }
      }
    }
  }
}
.category {
  &-content {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 50px;
      li {
        display: block;
        width: 270px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border: #e6e6e6 solid 1px;
        border-radius: 30px;
        font-size: 17px;
        color: #3e3e3e;
        margin: 0 40px 40px 0px;
        cursor: pointer;
        transition: all .3s;
        &:nth-child(4n) {
          margin-right: 0px!important;
        }
        &:hover {
          box-shadow: 0 1px 4px rgba(66, 66, 66, 0.301);
          background: #f42923;
          color: #fff;
        }
        .iconfont {
          font-size: 22px;
          margin-right: 15px;
        }
      }
    }
  }
}
</style>
